<script setup lang="ts">
import { useCounterStore } from '@/stores/change';
import type { ArticleItem, ArticleResData, AxiosResData } from '@/types';
import axios from 'axios';
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';

const router=useRouter()

// const props=defineProps<{
//   changeid:number
// }>()
const store=useCounterStore()

const list=ref<ArticleItem[]>([])

watch(() => store.changeid, async () => {
  console.log('props.changeid 变化了', store.changeid)
  const res = await axios.get<AxiosResData<ArticleResData>>('https://geek.itheima.net/v1_0/articles', {
    params: {
      channel_id: store.changeid,
      timestamp: Date.now()
    }
  })

  console.log('频道数据', store.changeid, res.data.data)
  list.value=res.data.data.results
}, {immediate:true})
</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="item in list" :key="item.art_id" @click="router.push(`/detail/${item.art_id}`)">
      <p class="title">{{ item.title }}</p>
      <img v-for="url in item.cover?.images"  class="img" :src="url" alt="">
      <div class="info">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}</span>
        <span>{{ item.pubdate }}</span>
      </div>.
    </div>
  </div>
</template>